<template>
    <li>
        <router-link :to="singerRoute" class="item f-tdn">
            <div class="head">
                <img class="singer-img" :src="imgUrl" :alt="name">

            </div>
            <div class="info">
                <h4>
                    <span class="name f-thide">{{ name }}</span>
                </h4>
                <p class="introduce f-thide">{{ introduce }}</p>
            </div>
        </router-link>
    </li>
</template>
<script setup>
defineProps({
    "name": String,
    "imgUrl": String,
    "introduce": String,
    "singerRoute": String
})
</script>
<style lang="scss" scoped>
li {
    margin-top: 14px;
    float: left;
    width: 210px;
    height: 62px;
    background: #fafafa;

    .item {
        float: left;
        width: 210px;
        height: 62px;
        background: #fafafa;
        
        &:hover{
            background: #f4f4f4;
        }
        .head {
            float: left;
            width: 62px;
            height: 62px;
        }

        .info {
            float: left;
            width: 133px;
            height: 60px;
            margin-left: 14px;
            border: 1px solid #e9e9e9;
            border-left: none;

            h4 {
                margin-top: 8px;

                .name {
                    width: 90%;
                    font-size: 14px;
                    display: inline-block;
                }

                .introduce {
                    width: 90%;
                    margin-top: 8px;
                    color: #666;

                }
            }
        }
    }

}
</style>